import React, { useState } from 'react'

export default class index extends React.Component {
    static tips = <div className='tips'>
        <br />
        <br />
        <p>这个组件除了render方法没有用jsx，其他一切正常</p>
        <p>当使用jsx时，我们可以像html一样，在标签上写属性，作为createElement的第二个参数</p>
        <p>值可以和html一样是字符串，也可以是一段js表达式</p>
        <p>当属性值是一段js表达式时，需要加上{'{}'}括号,比如{'<p style={{color:"red"}}>1</p>'}</p>
        <p>这样就给style一个object值</p>
        <p>你看这个组件的tips，children也一样</p>
    </div>
    static official = 'https://react.docschina.org/docs/introducing-jsx.html'
    state = {
        now: 'o'
    }
    onClickChange = () => {
        this.setState({
            now: this.state.now === 'o' ? 'x' : 'o'
        })
    }
    render() {
        return React.createElement(
            'div',
            {},
            [
                React.createElement(
                    'h1',
                    {
                        style: {
                            color: 'red',
                            fontSize: '16px'
                        }
                    },
                    '这个组件没有使用jsx'
                ),
                React.createElement(
                    'p',
                    {},
                    'JSX这个模板收集节点的属性，最终会成为React.createElement的参数'
                ),
                React.createElement(
                    'p',
                    {},
                    '因为React.createElement很难用，所以用jsx模板开发会舒服很多'
                ),
                React.createElement(
                    'p',
                    {},
                    '循环'
                ),
                ...Array(3).fill(1).map(item => React.createElement(
                    'div',
                    {
                        style: {
                            display: 'flex'
                        }
                    },
                    Array(3).fill(1).map(item => React.createElement(
                        Block,
                        {
                            style: {
                                height: '20px',
                                width: '20px',
                                border: '1px solid #000',
                                display: 'flex',
                                justifyContent: 'center',
                                alignItems: 'center'
                            },
                            now: this.state.now,
                            onClickChange: this.onClickChange
                        }
                    ))
                ))
            ]
        )
    }
}

function Block(props) {
    const [value, setValue] = useState()
    return <div {...props} onClick={() => {
        setValue(props.now)
        props.onClickChange && props.onClickChange()
    }}>
        {value}
    </div>
}
